<template>
  <div class="backAll">
    <header></header>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <img class="inputLabel" src="../imgs/login/title1_03.png">
      <el-form-item :show-message="false" prop="account" ref="account">
        <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
        <img src="../imgs/login/yonghu.png" alt="" class="imgTip">
      </el-form-item>
      <img class="inputImg" src="../imgs/login/title2_07.png">
      <el-form-item :show-message="false" prop="password" ref="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        <img src="../imgs/login/mima.png" alt="" class="imgTip">
      </el-form-item>
      <img class="inputLabel" src="../imgs/login/title3_11.png">
      <el-form-item :show-message="false" prop="checkVal">
        <el-input type="text" v-on:input ="inputFunc" v-model="loginForm.rand" auto-complete="off" placeholder="验证码"></el-input>
        <img src="../imgs/login/yanzheng.png" alt="" class="imgTip">
        <img src="" id="checkImage" @click="captcha()">
      </el-form-item>
      <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
      <el-form-item :show-message="false" class="loginArea">
        <el-button  @click.native.prevent="handleSubmit">登 录</el-button>
        <!--<el-button @click.native.prevent="handleReset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <footer>{{address}}</footer>
  </div>
</template>

<script>
    import { mapState,mapMutations,mapGetters ,mapActions } from 'vuex';
    export default {
        data() {
            return {
                logining: false,
                isEnter:true,
                resData : {},
                foot:{
                    'end':''
                },
                loginForm: {
                    account: 'admin',
                    password: '123456',
                    rand : ''
                },
                loginVal: {
                    action: "" ,
                    method: "",
                    rand:""
                },
                rules: {
                    // account: [{ required: true, message: '请输入账号', trigger: 'blur'}],
                    // password: [{ required: true, message: '请输入密码', trigger: 'blur'}],
                    // checkVal: [{ required: true, message: '请输入验证码', trigger: 'blur'}]
                },
                checked: true
            };
        },
        computed :{
            ...mapState([
                "id",
                "address"
            ]),
            ...mapGetters([
                "GET_NAME",
                "GET_ID"
            ]),
        },
        methods: {
            ...mapMutations(['SET_NAME']),
            // ...mapActions(['SET_NAME']),

            // 登录重置
            handleReset() {
                this.$refs.loginForm.resetFields();
            },

            // 登录
            handleSubmit() {
                //console.log(this.$router);
                this.$router.push({ path: '/home' });
            }
        },
        created(){
            let go = this;
            document.onkeydown = function(e) {
                let key = window.event.keyCode;
                if(key ===13){
                    go.handleSubmit();
                }
            }
        }
    }

</script>

<style lang="scss" scoped>
  @import '../styles/login.scss';
</style>